<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下拉列表框</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<label>
  选择你想要掌握的编程语言
  <select id="language" name="language" style="width: 225px;">
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="php">PHP</option>
    <option value="c">C</option>
    <option value="javascript">JavaScript</option>
  </select>
</label>
<!-- 通过input元素构造combobox -->
<script type="text/javascript">
function change(newValue, oldValue) {
  console.log(newValue);
}
</script>
  <input id="combobox" class="easyui-combobox"
    data-options="data: [{ value: 'java', text: 'Java' }, { value: 'perl', text: 'Perl' },
      { value: 'ruby', text: 'Ruby' }], textField: 'text', valueField: 'value'">
  <script type="text/javascript">
  $(function () {
    $("#language").combobox({
      required: true,
      multiple: true,
      //定义combobox对象的onChange事件的触发函数
      onChange: function (newValue, oldValue) {
        console.log(newValue);
      }
    });
    $("#combobox").combobox({
      onChange: function (newValue, oldValue) {
        console.log(newValue);
      }
    });
  })
</script>
</body>
</html>